<template>
  <div id="pheader" class="flex jy-end">
    <ul class="header_list">
      <div class="flex jy-center as-center title" @click="GoIndex">
        <img src="../assets/sicnulogo.jpeg" alt />
        <b>川师计科·企业进销存系统</b>
      </div>
      <div class="flex jy-center as-center">
        <ul class="func">
          <li>
            <el-link class="white-hover-bold" type="info" href="/index"
              >首页</el-link
            >
          </li>
          <li>
            <el-link class="white-hover-bold" type="info" href="/goods"
              >商品管理</el-link
            >
          </li>
          <li>
            <el-link class="white-hover-bold" type="info" href="/store"
              >仓库管理</el-link
            >
          </li>
        </ul>
        <li class="user_photo" @click.stop="handlemenu">
          <el-dropdown @command="handleCommand">
            <img src="../assets/head.png" class="head" />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="modify">个人中心</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </div>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'pheader',
  data() {
    return {
      avatarUrl: '../assets/head_stu.jpg',
    };
  },
  // created() {
  //   console.log(this.authLevel);
  // },
  computed: {
    ...mapState(['ownerId']),
    ...mapState(['account']),
  },
  methods: {
    GoIndex() {
      // 点击左上角返回主页
      window.location.href = '/index';
    },
    handleCommand(command) {
      // 选择个人中心或退出登录
      if (command === 'modify') {
        window.location.href = '/person';
      } else if (command === 'logout') {
        // // console.log(this.uid);
        // this.$axios
        //   .post(`${this.HOST}/login/logout`, {
        //     keyword: this.uid,
        //   })
        //   .then((res) => {
        //     const info = res.data;
        //     if (info.code === 200) {
        sessionStorage.setItem('Login', 'false');
        this.$store.dispatch('set_Login', 'false');
        window.location.href = '/';
        // } else {
        //   console.log('操作失败');
        //   }
        // });
      }
    },
  },
};
</script>

<style lang="less" scoped>
#pheader {
  width: 100%;
  height: 60px;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 9000;
  background-color: rgba(245, 245, 245, 0.1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
  color :rgba(255, 255, 255, 0.479);

  .header_list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    img {
      width: 40px;
      border-radius: 50%;
    }
    b {
      margin-left: 20px;
      font-size: 22px;
    }

    .head-text-logo {
      cursor: pointer;
    }

    .func {
      display: flex;
      text-align: right;
      line-height: 40px;
    }
    li {
      display: inline-block;
      margin-right: 20px;
    }
  }
  .title {
    cursor: pointer;
  }
}

.header_list {
  align-items: center;
  // color: white;
}
.header_title {
  float: left;
  font-size: 30px;
  color: #ffffff9a;
}
.user_photo {
  float: right;

  img {
    cursor: pointer;
    border-radius: 50%;
  }

  .head {
    width: 40px;
    height: 40px;
  }
}
</style>
